<template> 
    <div class="layout-content">
            <Row>
                <Col span="4" style="overflow:hidden">
                    <Menu active-name="1-2" width="auto" :open-names="['1']">
                        <Tree :data="data"  @on-select-change="onChangeTree"></Tree>
                        <!-- <Tree :data="data2" show-checkbox @on-select-change="onChangeTree"></Tree> -->
                    </Menu>
                </Col>
                <Col span="20">
                    <div class="layout-content-main">
                        <Input v-model="filter.title" class="inputlenth">
                            <Button slot="append" icon="ios-search" @click="searchName"></Button>
                        </Input>
                        <Button type="error" @click="removeMore" style="marginRight:10px">删除多条记录</Button>
                        <Button type="primary" @click="mesAdd">添加新记录</Button>

                        <Table class="tab" border 
                        :columns="columns7" :data="filter.data6" :height="355" 
                        @on-selection-change="onSelectChange"></Table>

                        <Page class="page" :total="filter.total" :page-size-opts="[5,10,20,40]" 
                        show-elevator show-sizer show-total 
                        @on-change="change" @on-page-size-change="changePage"></Page>
                    </div>
                </Col>
            </Row>

            <Modal v-model="modal" :title="titleUpdata">
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                <FormItem label="ID" prop="_id">
                    <Input v-model="formValidate._id" readonly></Input>
                </FormItem>
                <FormItem label="姓名" prop="name">
                    <Input v-model="formValidate.name" placeholder="请输入姓名"></Input>
                </FormItem>
                <FormItem label="密码" prop="password">
                    <Input v-model="formValidate.password" placeholder="请输入密码"></Input>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                    <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>
<script>
export default {
    data () {
        return {
            data: [
                    {
                        title: '总分类',
                        expand: true,
                        children: []
                    }
                ],
            columns7: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                {
                    title:"标题",
                    key:'title',
                    align: 'center',
                },
                {
                    title: '作者',
                    key: 'author',
                    align: 'center',
                },
                {
                    title: '内容',
                    key: 'content',
                    align: 'center',
                },
                {
                    title: '操作',
                    key: 'action',
                    width: 200,
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'warning',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: () => {
                                        this.show(params.row)
                                    }
                                }
                            }, '修改'),
                            h('Button', {
                                props: {
                                    type: 'error',
                                    size: 'small'
                                },
                                on: {
                                    click: () => {
                                        this.remove(params.row)
                                    }
                                }
                            }, '删除')
                        ]);
                    }
                }
            ],
            filter:{
                data6: [],
                limit: 10,
                page: 1,
                total: 0,
                title:"",
                cate:"",
            },
            ids: [], 
            modal: false,
            titleUpdata:"",
            formValidate: {
                name: '',
                password:'',
            },
            ruleValidate: {
                name: [
                    { required: true, message: '姓名不能为空', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '密码不能为空', trigger: 'blur' },
                ],
            },
        }
    },
    methods:{
        getCate(){
            this.$http.get("http://127.0.0.1:3000/cate/list/0")
            .then(res=>{
                this.data[0].children = res.data
            })
        },
        getData(){
            this.$http.post("http://127.0.0.1:3000/news/list",this.filter)
            .then(res=>{
                console.log(res.data.total);
                this.filter.total = res.data.total;
                this.filter.data6 = res.data.rows
            })
        },
        show(row){

        },
        remove(row){

        },
        removeMore(){
            this.$Modal.confirm({
                title: '删除提示',
                content: '<p>确定要删除该记录？</p>',
                onOk: () => {
                    // this.$http.post("http://127.0.0.1:3000/users/removes",{ids:this.ids.toString()})
                    // .then(res=>{
                    //     this.getData();
                    //     this.$Message.info('删除成功');
                    // })
                }
            });
        },
        change: function (page) {
            this.filter.page = page;
            this.getData();
        },
        changePage(rows){
            this.filter.limit = rows;
            this.getData();
        },
        onSelectChange(rows){
            if(rows){
                var ids = [];
                rows.filter(res=>{
                    ids.push(res._id);
                });
                this.ids = ids;
            }
        },
        mesAdd(){
            this.modal = true;
            this.idFlag = false;
            this.formValidate = {}
            Object.assign(this.formValidate,{name:"",password:""});
            this.titleUpdata = "添加用户信息";
        },
        searchName(){
            this.getData();
        },
        handleSubmit (name) {
            this.$refs[name].validate((valid) => {
                console.log(this.formValidate);
                if (valid) {
                    if(this.formValidate._id){

                    }else{
                        this.$Message.success('提交成功!'); 
                    }
                }else{
                    this.$Message.error('表单验证失败!');
                }
                
            });
        },
        handleReset (name) {
            this.$refs[name].resetFields();
        },
        onChangeTree(row){
            console.log(row)
        }
    },
    created(){
        this.getCate();
        this.getData()
    }
}
</script>
<style scoped>
    .tab{
        /* max-height:442px; */
        /* overflow:scroll; */
        margin-top:10px
    }
    .inputlenth{
      width:280px;
      float: left;
      margin-right: 20px;
  }
  .layout-content-main{
      /* border-left: 0 */
  }
  .page{
    margin-top:10px
  }
</style>

